<template>
    <page-view class="myself-page">
        <page-header title="我的">
        </page-header>
        <div class="content-box">
            <ul class="content">
                <li class="left">
                    <span class="iconfont iconhuiyuanhuangguanguanjun-xianxing" style="color:#F9D50E"></span>
                </li>
                <li class="text" v-if="userInfo">欢迎登陆</li>
                <li class="text" v-else>暂未登陆</li>
                <li class="right" v-if="userInfo">{{userInfo.name}}</li>
                <li class="right" v-else @click="$router.push({name:'Login'})">登录</li>
            </ul>
            <ul class="content" @click="$router.push({name:'ShopCar'})">
                <li class="left">
                    <span class="iconfont icongouwucheman" style="color:#008CE3"></span>
                </li>
                <li class="text">购物车</li>
                <li class="right">></li>
            </ul>
            <ul class="content">
                <li class="left">
                    <span class="iconfont iconlishidingdan" style="color:#57CD88"></span>
                </li>
                <li class="text">历史订单</li>
                <li class="right">></li>
            </ul>
            <ul class="content" @click="logOut1">
                <li class="left">
                    <span class="iconfont icontongyong-tuichudenglutubiao" style="color:#6B75ED"></span>
                </li>
                <li class="text">退出登录</li>
                <li class="right">></li>
            </ul>
        </div>
    </page-view>
</template>
<script>
    import {
        mapState,mapActions
    } from "vuex";
    export default {
        name: "MySelf",
        computed: {
            /*
            userInfo(){
                return this.$store.state.userInfo
            },
            */
            // 简便写法
            ...mapState(["userInfo"]),
        },
        methods:{
            ...mapActions(["logOut"]),
            logOut1(){
                this.logOut();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .myself-page {
        @include flexbox(column);

        .content-box {
            flex: 1;
            overflow: auto;
            background-color: #F7F7F7;

            .content {
                height: 45px;
                background-color: #fff;
                @include flexbox(row, flex-start, center);

                .left {
                    width: 60px;
                    height: 100%;
                    @include flexbox(row, center, center);

                    .iconfont {
                        font-size: 22px;
                    }
                }

                .text {
                    flex: 1;
                    overflow: auto;
                    height: 100%;
                    @include flexbox(row, flex-start, center);

                    border-bottom: 1px solid lightgray;
                }

                .right {
                    width: 110px;
                    height: 100%;
                    margin-right: 10px;
                    @include flexbox(row, flex-end, center);
                    border-bottom: 1px solid lightgray;

                }

                &:first-child {
                    margin-bottom: 10px;
                }
            }
        }
    }
</style>